<template>
  <div class="page-box">
    <!-- 左侧内容 -->
    <div class="flex-left">
      <BuJianLeiAnJianLieBiao></BuJianLeiAnJianLieBiao>
      <JieBanAnJianLeiHuiZong></JieBanAnJianLeiHuiZong>
    </div>

    <!-- 右侧内容 -->
    <div class="flex-right">
      <BuJianAnJianHuiZong></BuJianAnJianHuiZong>
      <BuJianLeiAnJianPaiMing v-if="options1.length" :tab="options1"></BuJianLeiAnJianPaiMing>
    </div>

    <!-- 部件选项框 -->
    <div class="postion_reletive">
      <div class="postion_reletive_box">
        <el-select @change="componentCategory" v-model="categoryId1" placeholder="请选择部件类别" :clearable="true">
          <el-option
            v-for="item in options1"
            :key="item.id"
            :label="item.name"
            :value="item.name"
          >
          </el-option>
        </el-select>
  
        <el-select @change="componentCategory2" v-model="categoryId2" placeholder="请选择二类部件" :clearable="true">
          <el-option
            v-for="item in options2"
            :key="item.id"
            :label="item.nameNum"
            :value="item.name"
          >
          </el-option>
        </el-select>
  
        <div class="checkbox-style" @click="selectShowLaw">
          <div class="checkbox-title rela" :class="isShowLaw ? 'on' : ''">
            显示案件
            <img v-if="isShowLaw" src="@assets/images/bujianMap/check.png" />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import BuJianAnJianHuiZong from "./components/BuJianAnJianHuiZong.vue";
import BuJianLeiAnJianLieBiao from "./components/BuJianLeiAnJianLieBiao.vue";
import BuJianLeiAnJianPaiMing from "./components/BuJianLeiAnJianPaiMing.vue";
import JieBanAnJianLeiHuiZong from "./components/JieBanAnJianLeiHuiZong.vue";
import { BuJianMapDB } from '@/api'
import Bus from '@/untils/bus'

export default {
  components: {
    BuJianAnJianHuiZong,
    BuJianLeiAnJianLieBiao,
    BuJianLeiAnJianPaiMing,
    JieBanAnJianLeiHuiZong,
  },

  data() {
    return {
      options1: [],     // 部件地图查询一类
      options2: [],     // 部件地图查询二类
      categoryId1: null,   // 部件地图一类数据
      categoryId2: null,   // 部件地图二类数据
      isShowLaw: false,
      anjianData: {}
    }
  },

  mounted() {
    this.componentoptions()
  },

  methods: {
    // 部件地图类别
    componentoptions() {
      BuJianMapDB.getFuMenuAtype().then(res => {
        this.options1 = res.data
        Bus.$emit('bujainList', res.data)
      })
    },

    // 部件地图类别二类
    componentoptions2(name) {
      const params = {
        aType: name,
      }
      BuJianMapDB.getFuMenuBtype(params).then(res => {
        res.data.forEach(item => {
          this.options2.push({
            name: item.name,
            id: item.id,
            nameNum:  item.name + ' (' + item.num + ')'
          })
        })
      })
    },

    // 部件地图一类选择
    componentCategory(value) {
      this.options2 = [];
      this.categoryId2 = null;
      this.componentoptions2(value)
    },

    // 部件地图二类选择
    componentCategory2(value) {
      Bus.$emit('componentCategory2', {value, type: 'category1'});
    },

    // 显示案件
    selectShowLaw () {
      this.isShowLaw = !this.isShowLaw;
      Bus.$emit('componentCategory2', {value: this.isShowLaw, type: 'category2'});
    }
  }
};
</script>

<style lang="less" scoped>
.postion_reletive {
  width: 100%;
  height: 100px;
  position: relative;
  display: flex;
  &_box {
    margin: 0 auto;
    display: flex;
  }
  /deep/ .el-select {
    margin-right: 20px;
  }
  /deep/ .el-input__inner {
    padding-left: 20px;
    width: 180px;
    height: 44px;
    background: rgba(4, 11, 32, 0.7);
    border: 1px solid #16d0ff;
    box-shadow: 0px 0px 19px 1px #173c90;
    border-radius: 8px;
    font-size: 18px;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #ffffff;
    opacity: 0.7;
  }
  /deep/ .el-icon-arrow-up:before {
    content: "";
    background: url("../../assets/images/yingpanshidian/sanjiao.png") center
      center no-repeat;
    background-size: 10px 8px;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 50%;
    left: 80%;
    transform: translate(-80%, -50%) rotate(180deg);
  }
  .checkbox-style {
    width: 160px;
    height: 44px;
    background: rgba(4, 11, 32, 0.7);
    border: 1px solid #16d0ff;
    -webkit-box-shadow: 0px 0px 19px 1px #173c90;
    box-shadow: 0px 0px 19px 1px #173c90;
    border-radius: 8px;
    line-height: 44px;
    text-align: center;
    cursor: pointer;
    .checkbox-title {
      
      color: #dcdfe6;
      font-size: 14px;
      font-weight: 400;
      padding-left: 15px;
      text-align: left;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding-right: 20px;
      // &.on {
      //   color: #00acff;
      // }
      img {
        top: 10px;
        right: 10px;
      }
    }
  }
}
</style>  